<script>
import CommonOperationForm from "@/components/CommonOperationForm/index.vue";
import {
  deepClone,
  isNotANumberOrEmpty,
  calculateTwoValue,
  numberToChinese,
  keepTwoDecimalFull,
  formatAmount
} from "@/utils";
import {getUserInfo} from "@/utils/auth";
import {generateSaleNumber} from "@/api/inventory";
import {parseTime,} from "@/utils";
import {getPurchaseIncoming, getPurchaseIncomingByID} from "@/api/purchaseIncoming";
import {getCustomerByID} from "@/api/customer";
import {addAccountsReceivable} from "@/api/accountsReceivable";

export default {
  name: 'add_accounts_payable',
  props: ["formData"],
  components: {CommonOperationForm},
  data() {
    return {
      tablekey: false,
      currentFormData: null,
      loading: false,
      list: [
        {
          type: 'input',
          clearable: false,
          text: '单据编号：',
          value: '',
          required: true,
          width: '75px',
        },
        {
          type: 'datetime',
          text: '单据日期：',
          required: true,
          pickerWidth: '190px',
          value: new Date(),
        },
      ],
      list2: [
        {
          text: '结算账户：',
          selectWidth: '160px',
          field: 'customerType',
          type: 'settlementAccount',
          defaultSettlementAccount: false,
          value: "",
          width: '80px',
          justifyContent: 'flex-start',
        },
        {
          type: 'inputnumber',
          text: '付款金额：',
          value: undefined,
          size: 'small',
          controls: false,
          inputEvent: (v, item) => {
            console.log(" ", v);

          },
        },
        {
          type: 'iconButton',
          loading: false,
          buttonType: ' ',
          fontSize: '18px',
          iconClass: 'add',
          clickEvent: () => {
            this.list4.push(deepClone(this.list3));
          }
        }
      ],
      list3: [
        {
          text: '结算账户：',
          selectWidth: '160px',
          field: 'customerType',
          type: 'settlementAccount',
          defaultSettlementAccount: false,
          value: "",
          width: '80px',
          justifyContent: 'flex-start',
        },
        {
          type: 'inputnumber',
          text: '付款金额：',
          value: undefined,
          size: 'small',
          controls: false,
          inputEvent: (v, item) => {
            console.log(" ", v);

          },
        },
        {
          type: 'iconButton',
          loading: false,
          buttonType: ' ',
          fontSize: '18px',
          iconClass: 'delete',
          clickEvent: (v, index) => {
            let list = [];
            for (let i = 0; i < this.list4.length; i++) {
              if (index !== i)
                list.push(this.list4[i]);
            }
            this.list4 = list;
          }
        }
      ],
      list4: [],
      list5: [
        {
          type: 'text',
          text: '合计金额：',
          textColor: 'red',
          width: '80px',
          fontWeight: '900',
          // width: '95px',
          value: '0.00',
        },
      ],
      list6: [
        {
          type: 'radio',
          text: '核销类型：',
          options: [
            {
              value: '自动核销',
              label: '自动核销',
            },
            {
              value: '手动核销',
              label: '手动核销',
            },
          ],
          inputEvent: (v) => {
            console.log(v);
            if (v === '自动核销') {
              this.list6 = [deepClone(this.copyList6[0])];
            } else {
              this.list6 = deepClone(this.copyList6);
            }

            this.table.data = [];
            this.list6[0].value = v;
          },
          value: '手动核销',
        },
        {
          type: 'button',
          paddingLeft: '15px',
          buttonText: '选择核销单据',
          buttonIcon: 'el-icon-search',
          event: () => {
            if (this.list7[0].value === '') {
              this.$message.error("请先选择客户");
              return;
            }
            this.dialog.dialogVisible = true;
            this.dialog.multipleSelection = [];
            this.getPurchaseIncoming();
          }
        }
      ],
      copyList6: [
        {
          type: 'radio',
          text: '核销类型：',
          options: [
            {
              value: '自动核销',
              label: '自动核销',
            },
            {
              value: '手动核销',
              label: '手动核销',
            },
          ],
          inputEvent: (v) => {
            console.log(v);
            if (v === '自动核销') {
              this.list6 = [deepClone(this.copyList6[0])];
            } else {
              this.list6 = deepClone(this.copyList6);
            }

            this.table.data = [];
            this.list6[0].value = v;
          },
          value: '手动核销',
        },
        {
          type: 'button',
          paddingLeft: '15px',
          buttonText: '选择核销单据',
          buttonIcon: 'el-icon-search',
          event: () => {
            this.dialog.dialogVisible = true;
            this.dialog.multipleSelection = [];
            this.getPurchaseIncoming();
          }
        }
      ],
      copyList62: [
        {
          type: 'radio',
          text: '核销类型：',
          options: [
            {
              value: '手动核销',
              label: '手动核销',
            },
          ],
          inputEvent: (v) => {
            console.log(v);
            if (v === '自动核销') {
              this.list6 = [deepClone(this.copyList6[0])];
            } else {
              this.list6 = deepClone(this.copyList6);
            }

            this.table.data = [];
            this.list6[0].value = v;
          },
          value: '手动核销',
        },
        {
          type: 'button',
          paddingLeft: '15px',
          buttonText: '选择核销单据',
          buttonIcon: 'el-icon-search',
          event: () => {
            this.dialog.dialogVisible = true;
            this.dialog.multipleSelection = [];
            this.getPurchaseIncoming();
          }
        }
      ],
      list7: [
        {
          text: '客户：',
          required: true,
          width: '80px',
          type: 'customerSetting',
          justifyContent: 'flex-start',
          // width: '95px',
          multiple: false,
          disabled: false,
          selectWidth: '150px',
          value: '',
        },
        {
          type: 'text',
          text: '当前欠款：',
          fontWeight: '900',
          marginLeft: '7px',
          textColor: 'red',
          // width: '95px',
          value: '',
        },
      ],
      list8: [
        {
          text: '制单员：',
          selectWidth: '160px',
          // width: '80px',
          required: true,
          field: 'employeeSetting',
          type: 'employeeSetting',
          value: '',
        },
        {
          text: '备注信息：',
          value: '',
          width: '90px',
          inputWidth: '200px',
          field: 'remarks',
          type: 'input',
        },
      ],
      list9: [
        {
          type: 'button',
          // buttonLineHeight: '16px',
          buttonIcon: 'el-icon-s-promotion',
          buttonText: '保存',
          buttonFontSize: '16px',
          loading: false,
          buttonHeight: '36px',
          borderLeft: '1px solid #dfe6ec',
          buttonWidth: '100px',
          paddingLeft: '12px',
          event: () => this.saveEvent(),
        },
      ],
      list10: [
        {
          type: 'button',
          // buttonLineHeight: '16px',
          buttonText: '反审核单据',
          buttonType: 'success',
          buttonFontSize: '16px',
          buttonHeight: '36px',
          loading: false,
          borderLeft: '1px solid #dfe6ec',
          buttonWidth: '150px',
          paddingLeft: '12px',
          event: () => {
            this.$confirm('反审核后将反操作资金账户,请再次确定?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
            }).then(() => {

            });
          },
        },
      ],
      list11: [{
        type: 'button',
        // buttonLineHeight: '16px',
        buttonIcon: 'el-icon-s-promotion',
        buttonText: '保存',
        buttonFontSize: '16px',
        loading: false,
        buttonHeight: '36px',
        borderLeft: '1px solid #dfe6ec',
        buttonWidth: '100px',
        paddingLeft: '12px',
        event: () => this.saveEvent(),
      },],
      table: {
        loading: false,
        data: [],
        header1: [
          {
            prop: 'createDate',
            label: '业务日期',
            width: '150px',
          },
          {
            prop: 'documentNumber',
            label: '原单编号',
            width: '160px',
          },
          {
            prop: 'typeName',
            label: '业务类型',
          },
          {
            prop: 'originPayAmount',
            label: '原单欠款',
          },
          {
            prop: 'verifiedAmount',
            label: '已核销',
          },
          {
            prop: 'unverifiedAmount',
            label: '未核销',
          },
          {
            prop: 'currentVerificationAmount',
            label: '本次核销',
            width: '180px',
          },
        ],
      },
      dialog: {
        dialogVisible: false,
        loading: false,
        data: [],
        header1: [
          {
            prop: 'createDate',
            label: '业务日期',
            width: '150px',
          },
          {
            prop: 'documentNumber',
            label: '原单编号',
          },
          {
            prop: 'typeName',
            label: '业务类型',
          },
          {
            prop: 'originPayAmount',
            label: '原单欠款',
          },
          {
            prop: 'verifiedAmount',
            label: '已核销',
          },
          {
            prop: 'unverifiedAmount',
            label: '未核销',
          },
        ],
        multipleSelection: [],
      }
    }
  },
  watch: {
    'list2': {
      handler() {
        this.calcMoney();
      },
      deep: true,
    },
    'list4': {
      handler() {
        this.calcMoney();
      },
      deep: true,
    },
    'list7.0': {
      handler() {
        if (this.table.data.length > 0 && !this.currentFormData) {
          this.$confirm('切换客户会清空已选择的核销单据，确定切换吗？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
          }).then(() => {
            this.table.data = [];
            this.requestApi();
          });
        } else {
          this.requestApi();
        }
      },
      deep: true,
    }
  },
  mounted() {
    if (this.$route.params._pid) {
      this.loading = true;
      getPurchaseIncomingByID({
        _id: this.$route.params._pid,
      }).then(res => {
        if (res.data.data && res.data.data[0]) {
          this.currentFormData = res.data.data[0];
          this.currentFormData['notDialog'] = true;
          this.setData();
          this.$nextTick(() => {
            this.loading = false;
          });
        }

        if (!this.currentFormData) {
          console.log("缺少参数");
        }
      });
    } else if (this.currentFormData) {
      this.currentFormData = this.currentFormData;
      this.setData();
    } else {
      let {_id} = this.$route.query;
      if (!_id) {

      } else {
        this.list7[0].value = _id;
        this.requestApi();
      }
      this.generateAccountsPayableOrderNumber();
    }
  },
  methods: {
    parseTime,
    calculateTwoValue, keepTwoDecimalFull,
    setData() {
      this.list[0].value = this.currentFormData.documentNumber;
      this.list[1].value = new Date(this.currentFormData.createDate);
      this.list7[0].value = this.currentFormData.customer;
      this.list7[0].disabled = true;
      this.list8[0].value = this.currentFormData.employee;
      this.list8[1].value = this.currentFormData.remarks;
      this.list7[1].value = keepTwoDecimalFull(this.currentFormData.totalReceivableAmount);
      // this.list7[0].value = this.currentFormData.customer;
      // this.list7[0].value = this.currentFormData.customer;
      this.table.data = this.currentFormData.productInfo;
      this.copyList6 = deepClone(this.copyList62);
      this.list6 = deepClone(this.copyList62);

      if (this.currentFormData.audit) {
        this.list11 = deepClone(this.list10);
      } else {
        this.list11 = deepClone(this.list9);
      }

      if (this.currentFormData.accountsList.length > 0) {
        this.list2[0].value = this.currentFormData.accountsList[0].accountID;
        this.list2[1].value = this.currentFormData.accountsList[0].accountPayMoney;
      }

      if (this.currentFormData.accountsList.length > 1) {
        for (let i = 1; i < this.currentFormData.accountsList.length; i++) {
          let item = this.currentFormData.accountsList[i];
          this.list4.push(deepClone(this.list3));
          this.list4[i - 1][0].value = item.accountID;
          this.list4[i - 1][1].value = item.accountPayMoney;
        }
      }
    },
    getPurchaseIncoming() {
      this.dialog.loading = true;
      getPurchaseIncoming({
        userID: getUserInfo().userID,
        accountsReceivable: true,
        typeNameList: ['销售单'],
        customerID: this.list7[0].value,
      }).then(res => {
        this.dialog.loading = false;
        console.log(res);
        this.dialog.data = res.data.data;
      });
    },
    requestApi() {
      let args = {
        userID: getUserInfo().userID,
      };

      if (this.list7[0].value !== '') {
        args['_id'] = this.list7[0].value;
      }

      getCustomerByID(args).then(res => {
        console.log(res.data.data);
        if (res.data.data.length <= 0) {
          this.$message.error("非法进入页面");
          return;
        }
        this.list7[1].value = res.data.data[0].totalReceivableAmount;
        this.list7[1].value = keepTwoDecimalFull(res.data.data[0].totalPayableAmount);
      });
    },
    generateAccountsPayableOrderNumber() {
      generateSaleNumber({
        userID: getUserInfo().userID,
        type: 'accountsReceivable',
      }).then(res => {
        console.log(res);
        this.list[0].value = res.data.data;
      });
    },
    saveEvent() {
      for (let i = 0; i < this.table.data.length; i++) {
        let v = this.table.data[i];
        let currentVerificationAmount = parseFloat(v['currentVerificationAmount']);
        let unpaidAmount = parseFloat(v['unpaidAmount']);

        if (unpaidAmount < currentVerificationAmount) {
          this.$message.error("核销单据第" + numberToChinese(i + 1) + "行本次核销不能大于" + unpaidAmount + "元");
          return;
        }
      }

      if (this.list2[0].value === '') {
        this.$message.error("至少选择一个结算账户");
        return;
      }

      if (this.list2[0].value !== '' && isNotANumberOrEmpty(this.list2[1].value)) {
        this.$message.error("请填写第一行付款金额");
        return;
      }

      for (let i = 0; i < this.list4.length; i++) {
        if (this.list4[i][0].value !== '' && isNotANumberOrEmpty(this.list4[i][1].value)) {
          this.$message.error("请填写第" + numberToChinese(i + 2) + "项付款金额");
          return;
        }
      }

      if (this.list[0].value === '') {
        this.$message.error("请填写单据编号");
        return;
      }


      if (this.list[1].value === '') {
        this.$message.error("请选择单据日期");
        return;
      }

      if (this.list7[0].value === '') {
        this.$message.error("请选择客户");
        return;
      }

      let productInfo = this.table.data;
      let documentNumber = this.list[0].value;
      let createDate = this.list[1].value;
      let customer = this.list7[0].value;
      let employee = this.list8[0].value;
      let remarks = this.list8[1].value;
      let verificationType = this.list6[0].value;
      let settlementAccountID = this.list2[0].value;


      let totalCurrentPayAmount = 0;
      for (let i = 0; i < this.table.data.length; i++) {
        let v = this.table.data[i];
        let currentVerificationAmount = parseFloat(v['currentVerificationAmount']);
        totalCurrentPayAmount = calculateTwoValue(totalCurrentPayAmount, currentVerificationAmount, 'add');
      }

      let totalPayMoney = parseFloat(this.list5[0].value);

      if (parseFloat(totalCurrentPayAmount) > totalPayMoney) {
        // 总核销金额不能大于合计金额，系统可以帮您自动协调，是否进行自动协调？
        this.$confirm('总核销金额不能大于合计金额，系统可以帮您自动协调，是否进行自动协调？', '确认信息', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(() => {
          let currentTotalMoney = totalPayMoney;
          let list = [];
          this.table.loading = true;
          for (let i = 0; i < this.table.data.length; i++) {
            let v = this.table.data[i];
            let currentVerificationAmount = parseFloat(v['currentVerificationAmount']);

            if (currentTotalMoney < currentVerificationAmount) {
              if (currentTotalMoney > 0) {
                v['currentVerificationAmount'] = keepTwoDecimalFull(currentTotalMoney);
                list.push(v);
              }
              currentTotalMoney = 0;
            } else {
              list.push(v);
              currentTotalMoney = calculateTwoValue(currentTotalMoney, currentVerificationAmount, 'minus');
            }
          }

          this.$nextTick(() => {
            this.$notify({
              title: '系统提示',
              message: '自动协调成功,点击保存提交~',
              duration: 2000
            });
            // this.$message.info("自动协调成功,点击保存提交~");
            this.table.data = list;
            this.table.loading = false;
          })
        }).catch(() => {

        });
        return;
      }


      // console.log(this.list2[0].value, this.list4[]);

      let accountsList = [{
        accountID: this.list2[0].value,
        accountPayMoney: this.list2[1].value,
      }];
      for (let i = 0; i < this.list4.length; i++) {
        if (this.list4[i][0].value !== '' && !isNotANumberOrEmpty(this.list4[i][1].value)) {
          accountsList.push({
            accountID: this.list4[i][0].value,
            accountPayMoney: this.list4[i][1].value,
          });
        }
      }

      this.list11[0].loading = true;
      addAccountsReceivable({
        _id: '',
        userID: getUserInfo().userID, totalPayMoney, originPayAmount: 0,
        productInfo, documentNumber, createDate, customer, accountsList,
        employee, remarks, verificationType, settlementAccountID, display: true, audit: true,
      }).then(res => {
        if (res.data.code === -1) {
          this.$message.error(res.data.errMsg);
          return;
        }
        this.$message.success("提交成功");
        this.list11[0].loading = false;
        setTimeout(() => {
          this.refreshSelectedTag(this.$route);
        }, 200);
      });
    },
    refreshSelectedTag(view) {
      this.$store.dispatch('tagsView/delCachedView', view).then(() => {
        const {fullPath} = view
        this.$nextTick(() => {
          this.$router.replace({
            path: '/redirect' + fullPath
          })
        })
      })
    },
    del(row) {
      console.log(row, this.table.data);
      let list = [];
      for (let i = 0; i < this.table.data.length; i++) {
        if (this.table.data[i]._id !== row._id) {
          list.push(this.table.data[i]);
        }
      }

      this.table.data = list;
    },
    calcMoney() {
      let totalMoney = 0;
      if (!isNotANumberOrEmpty(this.list2[1].value)) {
        totalMoney = calculateTwoValue(this.list2[1].value, totalMoney, 'add');
      }

      for (let i = 0; i < this.list4.length; i++) {
        if (!isNotANumberOrEmpty(this.list4[i][1].value)) {
          totalMoney = calculateTwoValue(this.list4[i][1].value, totalMoney, 'add');
        }
      }
      this.list5[0].value = keepTwoDecimalFull(totalMoney, 2);
    },
    select() {
      if (this.dialog.multipleSelection.length <= 0) {
        this.$message.error("请先选择数据");
        return;
      }

      this.table.loading = true;
      this.dialog.dialogVisible = false;
      this.$nextTick(() => {
        this.table.data = deepClone(this.dialog.multipleSelection);
        for (let i = 0; i < this.table.data.length; i++) {
          this.table.data[i]['currentVerificationAmount'] = keepTwoDecimalFull(this.table.data[i]['unpaidAmount']);
        }
        this.table.loading = false;
      })
    },
    cancel() {
      this.dialog.dialogVisible = false;
    },
    handleSelectionChange(val) {
      console.log(val);
      this.dialog.multipleSelection = val;
    },
    getSummaries(param) {
      const {columns, data} = param;
      const sums = [];

      let totalOriginPayAmount = 0;
      let totalVerifiedAmount = 0;
      let totalUnverifiedAmount = 0;
      let totalCurrentVerificationAmount = 0;
      for (let i = 0; i < data.length; i++) {
        let {originPayAmount, verifiedAmount, unverifiedAmount, currentVerificationAmount} = data[i];
        if (isNotANumberOrEmpty(originPayAmount)) {
          originPayAmount = 0;
        }
        if (isNotANumberOrEmpty(verifiedAmount)) {
          verifiedAmount = 0;
        }
        if (isNotANumberOrEmpty(unverifiedAmount)) {
          unverifiedAmount = 0;
        }
        if (isNotANumberOrEmpty(currentVerificationAmount)) {
          currentVerificationAmount = 0;
        }

        totalOriginPayAmount = calculateTwoValue(totalOriginPayAmount, originPayAmount, 'add');
        totalVerifiedAmount = calculateTwoValue(totalVerifiedAmount, verifiedAmount, 'add');
        totalUnverifiedAmount = calculateTwoValue(totalUnverifiedAmount, unverifiedAmount, 'add');
        totalCurrentVerificationAmount = calculateTwoValue(totalCurrentVerificationAmount, currentVerificationAmount, 'add');
      }

      columns.forEach((column, index) => {
        let {label} = column;
        if (label === '原单欠款') {
          sums[index] = keepTwoDecimalFull(totalOriginPayAmount);
        } else if (label === '已核销') {
          sums[index] = keepTwoDecimalFull(totalVerifiedAmount);
        } else if (label === '未核销') {
          sums[index] = keepTwoDecimalFull(totalUnverifiedAmount);
        } else if (label === '本次核销') {
          sums[index] = keepTwoDecimalFull(totalCurrentVerificationAmount);
        } else {
          sums[index] = '';
        }
      });
      this.$nextTick(() => {
        console.log("sums", sums);
        this.$refs.purchaseIncomingTableRef2.doLayout();
      });
      return sums;
    },
    blurEvent() {
      this.table.data.push({});
      this.table.data.pop();
    },
    rowClick(v) {
      this.$refs.purchaseIncomingTableRef.toggleRowSelection(v);
    },
  }
}
</script>

<template>
  <div class="product-manager-warp" v-loading="loading"
       style="height: calc(100vh - 84px); overflow: auto; padding: 20px; ">
    <div class="dashboard-container"
         style=" padding: 8px 25px 10px;  ">
      <div
          style="line-height: 16px; flex-wrap: wrap; width: 100%;   font-size: 14px; font-family: Source Han Sans CN;font-weight: 400;color: #2F3745; ">
        <common-operation-form :list="list"/>
        <common-operation-form :list="list7" style="margin-top: 10px;"/>
      </div>
    </div>

    <div class="dashboard-container"
         style=" padding: 10px 25px 10px; margin-top: 8px; ">
      <div
          style="line-height: 16px; flex-wrap: wrap; width: 100%;   font-size: 14px; font-family: Source Han Sans CN;font-weight: 400;color: #2F3745; ">
        <span
            style="color: #1e1e1e; font-size: 18px; padding-bottom: 15px; display: inline-block; padding-top: 10px; font-weight: 900;">收款信息</span>
        <common-operation-form :list="list2"/>
        <common-operation-form v-for="(item, index) in list4" :listIndex="index" style="margin-top: 10px;"
                               :list="item"/>
        <common-operation-form :list="list5" style="margin-top: 15px; margin-bottom: 10px;"/>
      </div>
    </div>

    <div class="dashboard-container write-off-document"
         style=" padding: 10px 25px 18px; margin-top: 8px; ">
      <div
          style="line-height: 16px; flex-wrap: wrap; width: 100%;   font-size: 14px; font-family: Source Han Sans CN;font-weight: 400;color: #2F3745; ">
        <span
            style="color: #1e1e1e; font-size: 18px; padding-bottom: 15px; display: inline-block; padding-top: 10px; font-weight: 900;">
          核销单据
        </span>
        <common-operation-form :list="list6"
                               style="margin-bottom: 2px; height: 38px; display: flex; align-content: center; align-items: center;"/>
        <el-table style="margin-top: 15px;" :height="!currentFormData ? '300' : '200'" v-show="list6[0].value === '手动核销'"
                  :summary-method="getSummaries" show-summary ref="purchaseIncomingTableRef2"
                  v-loading="table.loading" :data="table.data" border>
          <el-table-column :align="'center'" :label="'序号'" type="index" width="80px"></el-table-column>
          <el-table-column :key="Math.random()"
                           v-for="(item, index) in table.header1"
                           :prop="item.prop"
                           :index="index" align="center"
                           :width="item.width || 'auto'" :header-align="`center`"
                           :label="item.label">
            <template slot-scope="scope">
              <span v-if="item.prop === 'createDate'" style=" ">
                {{ parseTime(new Date(scope.row[item.prop])) }}
              </span>
              <el-input-number v-else-if="item.prop === 'currentVerificationAmount'" :precision="2"
                               :controls="false" :key="tablekey" @blur="blurEvent"
                               v-model="scope.row['currentVerificationAmount']" :step="1" :min="0.01"></el-input-number>
              <span v-else style=" ">{{ scope.row[item.prop] }}</span>
            </template>
          </el-table-column>

          <el-table-column
              label="操作" width="80" fixed="right">
            <template slot-scope="scope">
              <div style="display: flex;">
                <el-tooltip content="删除" slot="reference" placement="top">
                  <el-button size="mini" @click="del(scope.row)" type="danger" icon="el-icon-delete" circle></el-button>
                </el-tooltip>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <el-alert style="margin: 10px 0;" v-show="list6[0].value === '自动核销'"
                  title="自动核销功能介绍"
                  type="info"
                  description="️系统会将您输入的付款金额，按照进货欠款单据从早到近的顺序，进行单据自动核销">
        </el-alert>
      </div>
    </div>

    <div class="dashboard-container"
         style=" padding: 10px 25px 15px;  margin-top: 8px; ">
      <div
          style="line-height: 16px; flex-wrap: wrap; width: 100%;   font-size: 14px; font-family: Source Han Sans CN;font-weight: 400;color: #2F3745; ">
        <span
            style="color: #1e1e1e; font-size: 18px; padding-bottom: 15px; display: inline-block; padding-top: 10px; font-weight: 900;">
          其他信息
        </span>
        <div style="display: flex; position: relative; ">
          <common-operation-form :list="list8" style="margin-bottom: 2px;"/>
          <common-operation-form :list="list11" style="margin-bottom: 2px;  position: absolute; right: 0px;"/>
        </div>
      </div>
    </div>

    <el-dialog style="margin-top: 10px;"
               :close-on-click-modal="false"
               width="95%" v-dialog-drag :modal="false"
               :custom-class="currentFormData ? 'dialoginter108' : 'dialoginter7'" title="选择应付单据"
               :visible.sync="dialog.dialogVisible">
      <span v-if="dialog.dialogVisible">
        <el-table style="margin-top: 15px; " fit :height="windowHeight + 30" ref="purchaseIncomingTableRef"
                  @selection-change="handleSelectionChange" @row-click="rowClick"
                  highlight-current-row v-loading="dialog.loading" :data="dialog.data" border >
            <el-table-column
                type="selection" fixed="left" align="center"
                :header-align="`center`"
                width="55">
            </el-table-column>
            <template v-for="(item, index) in dialog.header1">
              <el-table-column :prop="item.prop" :key="index" :show-overflow-tooltip="true"
                               :width="item.width || 'auto'" :align="`center`"
                               :label="item.label">
                <template slot-scope="scope">
                  <span v-if="item.prop === 'payAmount'" :style="`color: ${item.color ? item.color : ''}`">
                    {{ keepTwoDecimalFull(scope.row[item.prop], 2) }}
                  </span>
                  <span v-else-if="item.prop === 'createDate'" style=" ">
                      {{ parseTime(new Date(scope.row[item.prop])) }}
                  </span>
                  <span v-else-if="item.prop === 'receivableAmount'" :style="`color: ${item.color ? item.color : ''}`">
                    {{ keepTwoDecimalFull(scope.row[item.prop]) }}
                  </span>
                  <span v-else :style="`color: ${item.color ? item.color : ''}`">{{ scope.row[item.prop] }}</span>
                </template>
              </el-table-column>
            </template>
        </el-table>
      </span>

      <span slot="footer" class="dialog-footer">
          <el-button size="small" @click="cancel">关闭</el-button>
          <el-button type="primary" size="small" @click="select">选择</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<style scoped lang="scss">
.dashboard-inner {
  font-size: 16px;
  font-weight: 700;
  padding: 0 0 10px 0;
  color: #2f3745;
}

.dashboard {
  &-container {
    background: #fff;
    box-shadow: 0px 0px 10px 0px rgba(45, 51, 65, 0.08);
    border-radius: 10px;
  }

  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}


</style>
